<template>
    <main id="login">
        <header>
            <h1>家庭理财管理系统</h1>
        </header>
        <div class="wapper">
            <div>
                <span>名称:</span>
                <el-input v-model="para.phone" placeholder="请输入手机号" />
            </div>
            <div>
                <span>密码:</span>
                <el-input v-model="para.password" placeholder="请输入密码" type="password" />
            </div>
            <div>
                <el-button @click="login" round>登录</el-button>
                <el-button @click="register" round>注册</el-button>
            </div>
        </div>
    </main>

    <el-dialog v-model="showDialog">
        <el-form :model="form" label-width="120px">
            <el-form-item label="姓名">
                <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="电话">
                <el-input v-model="form.phone" />
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="form.password" type="password" />
            </el-form-item>
            <el-form-item label="确认密码">
                <el-input v-model="form.cheakPassword" type="password" />
                <el-button type="primary" @click="createUser">确定</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>


</template>


<script setup>
import { ElMessage } from 'element-plus'
import axios from 'axios';
import { onMounted, ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import useUser from '../store/user';

const para = ref({
    phone: null,
    password: null
})

const familyMemberDialog = ref(false)
const showDialog = ref(false)
const router = useRouter();
const user = useUser();

const login = () => {
    axios({
        method: "POST",
        url: "/api/user/login",
        data: para.value

    }).then((resp) => {
        if (resp.data.code === 200) {
            localStorage.setItem("token", resp.data.data);
            user.login(router);
        }
    })
}



const register = () => {
    showDialog.value = true;
}

const createUser = () => {
    if (form.password === form.cheakPassword) {
        axios({
            method: "POST",
            url: "/api/user/register",
            data: form,
        }).then((resp) => {
            if (resp.data.code === 200) {
                ElMessage({
                    type: 'success',
                    message: '注册成功',
                })
                showDialog.value = false;
                familyMemberDialog.value = true;
            }
        })
    } else {
        ElMessage({
            type: 'error',
            message: '请确认密码',
        })
    }
}




const form = reactive({
    name: '',
    phone: '',
    password: '',
    cheakPassword: '',
})




</script>

<style scoped>
.wapper {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
